<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="referrer" content="never"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css?version=2" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		.plug-select {
			width: 100%;
        	margin-top: 30px;
        }
        .btn-tab-sx button.active {
			color: #fff;
			background-color: #11B5AB;
		}
		.btn-tab-sx .btn-default.active:focus, .btn-tab-sx .btn-default.active:hover {
			color: #fff;
			background-color: #2aeee2;
			border-color: #2aeee2;
		}
		.tab-content .tab-pane {
			height: 452px;
		}
		.list-li {
			margin-top: 12px;
			border: 1px solid #A1A1A1;
		}
		.tab-pane .list-li .checkbox-inline,.tab-pane .list-li .radio-inline {
			vertical-align: text-top;
			padding-left: 35px;
		}
		.list-li .list-body {
			display: inline-block;
			vertical-align: middle;
		}
		.tab-pane .list-li .user-info {
			display: inline-block;
			vertical-align: middle;
			color: #666666;
		}
		.user-info .name {
			margin-right: 10px;
		}
		.user-info .position {
			color: #6F6F6F;
			font-size: 12px;
		}
		.user-info .phone {
			font-size: 13px;
		}
		.phone-icon {
			position: absolute;
			width: 50px;
			height: 100%;
			top: 0;
			right: 50px;
			line-height: 50px;
			text-align: center;
			border-left: 1px solid #A1A1A1;
			border-right: 1px solid #A1A1A1;
		}
		.phone-icon img {
			width: 20px;
			height: 20px;
		}
		.wechart-icon {
			position: absolute;
			width: 50px;
			height: 100%;
			top: 0;
			right: 0;
			line-height: 50px;
			text-align: center;
		}
		.wechart-icon img {
			width: 20px;
			height: 20px;
		}
		.li-padding .list-li {
			padding: 14px 0;
		}
		.ad-name {
			color: #666666;
		}
		.href-btn {
			position: absolute;
			height: 100%;
			top: 8px;
			right: 10px;
		}
		.next-step {
			margin-top: 20px;
		}
		.next-step button.active {
			background-color: #11B5AB;
		    color: #fff;
		    border-color: #11B5AB;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="plug-select">
			<div class="btn-group btn-group-justified btn-tab-sx" role="group" aria-label="button-group">
				<div class="btn-group" role="group">
					<button type="button" panel-data="tab-panel1" class="btn btn-default active">名片</button>
				</div>
				<div class="btn-group" role="group">
					<button type="button" panel-data="tab-panel2" class="btn btn-default">报名</button>
				</div>
				<div class="btn-group" role="group">
					<button type="button" panel-data="tab-panel3" class="btn btn-default">门票</button>
				</div>
				<!--<div class="btn-group" role="group">
					<button type="button" panel-data="tab-panel4" class="btn btn-default">代金券</button>
				</div>-->
			</div>
			<div class="tab-content">
				<div id="tab-panel1" class="tab-pane refresh-scroll active">
					<ul class="list-ul">
						<li class="list-li">
							<label class="radio-inline">
								<input type="radio" name="cardsRadio" value="option1">
							</label>
							<div class="list-body">
								<img class="border-radius-40" src="../../img/headimg.jpg" />
								<div class="user-info">
									<span class="name">王经理</span><span class="position">销售总监</span><br />
									<span class="phone">18685306265</span>
								</div>
								<div class="phone-icon">
									<img src="../../img/myExtension/phone.png" />
								</div>
								<div class="wechart-icon">
									<img src="../../img/myExtension/wechart.png" />
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div id="tab-panel2" class="tab-pane refresh-scroll li-padding">
					<ul class="list-ul">
						<li class="list-li">
							<label class="radio-inline">
								<input type="radio" name="enrollRadio" value="option1">
							</label>
							<div class="list-body">
								<div class="ad-name">
									<a>活动名称</a>
								</div>
								<div class="href-btn">
									<button type="button" class="btn btn-default">马上报名</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div id="tab-panel3" class="tab-pane refresh-scroll li-padding">
					<ul class="list-ul">
						<li class="list-li">
							<label class="radio-inline">
								<input type="radio" name="goodsRadio" value="option1">
							</label>
							<div class="list-body">
								<div class="ad-name">
									<a>商品名称</a>
								</div>
								<div class="href-btn">
									<button type="button" class="btn btn-default">立即领取</button>
								</div>
							</div>
						</li>
					</ul>
				</div>	
			</div>	
		</div>
		<div class="next-step">
			<button type="button" id="nextStep" class="btn btn-block active">下一步</button>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var contentUrlData;
		var userID,companyID,articleID;
		var cardsRadioID,enrollRadioID,ticketsRadioID;
		$(function(){
			contentUrlData = $.cookie("contentUrlData");
			articleID = base.getParameter("articleID");
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			//获取推文详情
            if (articleID != null && articleID != "") {
            	base.postData(base.url.getArticleInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackGetArticleInfo);
            }else{
            	//获取卡片列表
				base.postData(base.url.getCardList, {userID:userID,companyID:companyID,type:1}, callbackGetCardList);
				//获取报名列表
				base.postData(base.url.getEnrollList, {userID:userID,companyID:companyID,type:1}, callbackGetEnrollList);
				//获取门票列表
				base.postData(base.url.getTicketsList, {userID:userID,companyID:companyID,type:1}, callbackGetTicketsList);
            }
		});
		//插件选择器
		$(".btn-tab-sx").on("click", "button", function(){
			$(".btn-tab-sx button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
		});
		//推文详情返回
		function callbackGetArticleInfo(data) {
			if (data.success) {
				for (var i=0;i<data.context.pluginList.length;i++) {
					if (data.context.pluginList[i].pluginType == 0) {
						cardsRadioID = data.context.pluginList[i].pluginID;
					} else if (data.context.pluginList[i].pluginType == 1) {
						enrollRadioID = data.context.pluginList[i].pluginID;
					} else if (data.context.pluginList[i].pluginType == 4) {
						ticketsRadioID = data.context.pluginList[i].pluginID;
					}
				}
				//获取卡片列表
				base.postData(base.url.getCardList, {userID:userID,companyID:companyID,type:1}, callbackGetCardList);
				//获取报名列表
				base.postData(base.url.getEnrollList, {userID:userID,companyID:companyID,type:1}, callbackGetEnrollList);
				//获取门票列表
				base.postData(base.url.getTicketsList, {userID:userID,companyID:companyID,type:1}, callbackGetTicketsList);
			}
		}
		//名片列表返回
		function callbackGetCardList(data){
			if (data.success) {
				var html = "";
				for (var i=0; i<data.context.cardList.length; i++) {
					html += pingCardList(data.context.cardList[i]);
				}
				$("#tab-panel1 .list-ul").html(html);
			}
		}
		function pingCardList(data) {
			var html = '<li class="list-li">'+
						'	<label class="radio-inline">';
						if (cardsRadioID == data.cardID) {
				html +=	'		<input type="radio" checked="checked" name="cardsRadio" value="'+data.cardID+'">';
						}else{
				html +=	'		<input type="radio" name="cardsRadio" value="'+data.cardID+'">';			
						}
				html +=	'	</label>'+
						'	<div class="list-body">'+
						'		<img class="border-radius-40" src="'+data.cardHeadImgUrl+'" />'+
						'		<div class="user-info">'+
						'			<span class="name">'+data.cardUserName+'</span><span class="position">'+data.post+'</span><br />'+
						'			<span class="phone">'+data.cardUserPhone+'</span>'+
						'		</div>'+
						'		<div class="phone-icon">'+
						'			<img src="../../img/myExtension/phone.png" />'+
						'		</div>'+
						'		<div class="wechart-icon">'+
						'			<img src="../../img/myExtension/wechart.png" />'+
						'		</div>'+
						'	</div>'+
						'</li>';
			return html;			
		}
		//报名列表返回
		function callbackGetEnrollList(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i<data.context.enrollList.length; i++) {
					html += pingEnrollList(data.context.enrollList[i]);
				}
				$("#tab-panel2 .list-ul").html(html);
			}
		}
		function pingEnrollList(data) {
			var html = '<li class="list-li">'+
						'	<label class="radio-inline">';
						if (enrollRadioID == data.enrollID) {
				html +=	'		<input type="radio" checked="checked" name="enrollRadio" value="'+data.enrollID+'">';
						}else{
				html +=	'		<input type="radio" name="enrollRadio" value="'+data.enrollID+'">';			
						}
				html +=	'	</label>'+
						'	<div class="list-body">'+
						'		<div class="ad-name">'+
						'			<a>'+data.activityTitle+'</a>'+
						'		</div>'+
						'		<div class="href-btn">'+
						'			<button type="button" class="btn btn-default">马上报名</button>'+
						'		</div>'+
						'	</div>'+
						'</li>';
			return html;
		}
		//门票列表返回
		function callbackGetTicketsList(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i<data.context.ticketsList.length; i++) {
					html += pingTicketsList(data.context.ticketsList[i]);
				}
				$("#tab-panel3 .list-ul").html(html);
			}
		}
		function pingTicketsList(data) {
			var html = '<li class="list-li">'+
						'	<label class="radio-inline">';
						if (ticketsRadioID == data.ticketsID) {
				html +=	'		<input type="radio" checked="checked" name="ticketsRadio" value="'+data.ticketsID+'">';
						}else{
				html +=	'		<input type="radio" name="ticketsRadio" value="'+data.ticketsID+'">';			
						}
				html +=	'	</label>'+
						'	<div class="list-body">'+
						'		<div class="ad-name">'+
						'			<a>'+data.theme+'</a>'+
						'		</div>'+
						'		<div class="href-btn">'+
						'			<button type="button" class="btn btn-default">马上领取</button>'+
						'		</div>'+
						'	</div>'+
						'</li>';
			return html;
		}
		$(".tab-content").on("mousedown", "input[type='radio']", function(e){
			var radioChecked = $(this).prop("checked");
	        $(this).prop('checked', !radioChecked);
	        return false;
		});
		$(".tab-content").on("click", "input[type='radio']", function(e){
			return false;
		});
		$("#nextStep").click(function(){
			contentUrlData = eval('(' + contentUrlData + ')');
			if (contentUrlData == null || contentUrlData.userID == "") {
				toastr.warning("参数不能为空！");
				return;
			}
			//获取插件
			var pluginJson = new Array();
			var cardsRadio = $("input[name='cardsRadio']:checked").val();
			if (cardsRadio != null && cardsRadio != "") {
				pluginJson.push({"pluginType":0,"pluginID":cardsRadio})
			}
			var enrollRadio = $("input[name='enrollRadio']:checked").val();
			if (enrollRadio != null && enrollRadio != "") {
				pluginJson.push({"pluginType":1,"pluginID":enrollRadio})
			}
			var ticketsRadio = $("input[name='ticketsRadio']:checked").val();
			if (ticketsRadio != null && ticketsRadio != "") {
				pluginJson.push({"pluginType":4,"pluginID":ticketsRadio})
			}
			pluginJson = JSON.stringify(pluginJson)
			contentUrlData["pluginJson"] = pluginJson;
			base.postData(base.url.updateArticleInfo, contentUrlData, callbackUpdateArticleInfo);
		});
		function callbackUpdateArticleInfo(data) {
			if (data.success) {
				$.cookie("contentUrlData", null, {expires: -1});
				window.parent.location = data.context.QRCodeUrl;
			}else{
				toastr.warning(data.msg);
			}
		}
	</script>
</body>
</html>
